import React from "react";
import { Pagination, Space, Table, Tag } from "antd";
import { getAllArticle, deleteArticle } from "@/utils/back/index";
import { useEffect, useState } from "react";

// 生成随机数
const generateRandomString = (length: number) => {
  let result = "";
  const characters = "0123456789"; // 只包含数字的字符集合
  for (let i = 0; i < length; i++) {
    const randomIndex = Math.floor(Math.random() * characters.length);
    result += characters.charAt(randomIndex);
  }
  return result;
};

const ArticleManagement: React.FC = () => {
  // 列表配置
  const columns = [
    {
      title: "id",
      dataIndex: "articleId",
      key: "articleId",
    },
    {
      title: "标题",
      dataIndex: "title",
      key: "title",
      render: (text: string) => <a>{text}</a>,
    },
    {
      title: "时间",
      dataIndex: "time",
      key: "time",
    },
    {
      title: "点赞数",
      dataIndex: "likeCount",
      key: "likeCount",
    },
    {
      title: "浏览量",
      dataIndex: "browse",
      key: "browse",
    },
    {
      title: "标签",
      key: "tagNames",
      dataIndex: "tagNames",
      render: (_: any, { tagNames }: any) => (
        <>
          {tagNames.map((tag: any) => {
            let color = tag.length > 3 ? "geekblue" : "green";
            if (tag === "loser") {
              color = "volcano";
            }
            const timestamp = generateRandomString(20);
            return (
              <Tag color={color} key={timestamp}>
                {tag.toUpperCase()}
              </Tag>
            );
          })}
        </>
      ),
    },
    {
      title: "操作",
      key: "action",
      render: (_: any, record: any) => (
        <Space size="middle">
          <a>Invite {record.name}</a>
          <a
            onClick={() => {
              delArticle(record.articleId);
            }}
          >
            删除
          </a>
        </Space>
      ),
    },
  ];
  // 分页配置
  // let currentPage = 1;
  // const paginationOp = {
  //   current: 2,
  //   pageSize: 10,
  //   total: 100,
  //   onChange: (page: number) => {
  //     console.log(page);
  //     getArticle(page.toString());
  //     currentPage = page;
  //   },
  // };
  // 获取文章数据
  const [ArticleData, setArticleData] = useState([]);
  const getArticle = (page = "1", pageSize = "10") => {
    const data = {
      page: page,
      pageSize: pageSize,
    };
    console.log("data", data);

    getAllArticle(data).then((res: any) => {
      console.log(res.data.articles);
      const resData = res.data.articles.map((item: any) => {
        return {
          ...item,
          key: item.articleId,
        };
      });
      setArticleData(resData);
    });
  };
  useEffect(() => {
    getArticle();
  }, []);
  // 删除文章
  const delArticle = (articleId: number) => {
    deleteArticle(articleId).then((res: any) => {
      console.log(res);
      getArticle();
    });
  };

  return (
    <>
      <Table columns={columns} dataSource={ArticleData} pagination={false} />
      <div style={{ display: "flex", flexDirection: "column", margin: "10px" }}>
        <Pagination
          style={{ alignSelf: "flex-end" }}
          defaultCurrent={1}
          pageSize={10}
          total={100}
          onChange={(page: number) => {
            console.log(page);
            getArticle(page.toString());
          }}
        />
      </div>
    </>
  );
};

export default ArticleManagement;
